Como Implementar Angular Material en un proyecto, para utilizar los distintos componentes gráficos.

NOTA: no confundir Angular Material con Material Design.

Para utilizar Angular Material primero tenemos que instalarlo con el siguiente comando:

ng add @angular/material

Seleccionamos todas las opciones por defecto cuando nos pregunte.

A continuación tenemos que importar el modulo del componente que vayamos a utilizar en nuestro app.module.ts, en este ejemplo usaremos un toggle:

En este caso tenemos que incluir las siguientes lineas:

import { MatSlideToggleModule } from '@angular/material/slide-toggle'; MatSlideToggleModule

NOTA: puede ser que el import no se autoincluya y tendremos que ponerlo manualmente.

Una vez hecho esto simplemente tenemos que incluir el siguiente código en la plantilla:

<mat-slide-toggle>Toggle me!</mat-slide-toggle>

y el componente se mostrará en nuestra página:

Al ejecutar nuestra aplicación podemos obtener un error como el siguiente:

Error: src/app/app.component.html:1:5 - error NG8001: 'mat-slide-toggle' is not a known element:
1. If 'mat-slide-toggle' is an Angular component, then verify that it is part of this module.
2. If 'mat-slide-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Este error aparece cuando no hemos realizado el import del componente que estamos utilizando.

Angular | Material